<template>
  <div class="recursion-component">
     <ggg :obj="data"></ggg>      
  </div>
</template>
<script>
let expa = {
  name:'json',
  // children:{
  //   name:'array',
  //   val:[
  //     {
  //       style:'power',
  //       height:100
  //     }
  //   ]
  // }
}
export default {
  name: "Recursion",
  props:{
    data:{
      default:expa
    }
  },
  components:{
    ggg:{
      name:'gs',
      template:`
        <div>
          <ul v-if="isArr">
            <li v-for="(item,i) in objClone">
              {{ item }}
            </li>
          </ul>

          <ul v-if="!isArr">
            <ol v-for="(val,key) in objClone">
              {{ val }}
            </ol>
          </ul>
        
        </div>
      `,
      props:{
        obj:{
          default:function(){
            return []
          }
        }
      },
      computed:{
        objClone(){
          return this.obj
        },
        isArr(){
          let  vm = this
          // 413028196602211538
          return Object.prototype.toString.call( vm.objClone ) == '[object Array]'
        }
      },
      data(){
        return {

        }
      },
      methods:{
        
      },
    }
  },
  data () {
    return {
       
    };
  },
  computed:{
            
  },
  mounted(){
            
  },
  methods:{
            
  },
}
</script>
<style lang="css" scoped>
</style>